<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>rich-text</title>
	<style>
		input {
			border-radius: 4px;
			font-family: inherit;
			font-size: 100%;
			line-height: 1.15;
			margin: 0;
			outline: none;
			border: 1px solid #999;
			padding: 8px 10px;
		}

		.classify-txt,
		.title-txt,
		.editor {
			color: #f00;
		}

		.btn1 {
			text-align: center;
		}

		#div1 .w-e-text-container {
			height: 300px !important;
		}

		button {

			display: inline-block;
			line-height: 1;
			white-space: nowrap;
			cursor: pointer;
			background: #FFF;
			border: 1px solid #DCDFE6;
			color: #606266;
			-webkit-appearance: none;
			text-align: center;
			box-sizing: border-box;
			outline: 0;
			margin: 0;
			-webkit-transition: .1s;
			transition: .1s;
			font-weight: 500;
			-moz-user-select: none;
			padding: 8px 10px;
			font-size: 14px;
			border-radius: 4px;
			color: #FFF;
			background-color: #409EFF;
			border-color: #409EFF;
			
		}
	</style>
</head>

<body>
	<!-- <p>	标题：<input id="title" type="text"> <span class="title-txt"></span> </p>
	<p>	类型：<input id="classify" type="text"> <span class="classify-txt"></span></p> -->
	<p><span class="editor"></span></p>

	<div id="div1">
	</div>
	<p>
		<button id="btn1">转成富文本</button>
	</p>
	<script type="text/javascript" src="wangEditor.js"></script>
	<script src="./jquery-1.8.3.min.js"></script>
	<script type="text/javascript">
		var E = window.wangEditor
		var editor = new E('#div1');
		var title = document.getElementById("title");
		var classify = document.getElementById("classify");
		var titleTxt = document.getElementsByClassName("title-txt")[0];
		var classifyTxt = document.getElementsByClassName("classify-txt")[0];
		var editorInner = document.getElementsByClassName("editor")[0];
		editor.customConfig.debug = true;
	
		// 关闭粘贴内容中的样式
		editor.customConfig.pasteFilterStyle = false
		// 忽略粘贴内容中的图片
		editor.customConfig.pasteIgnoreImg = false
		// 使用 base64 保存图片
		//editor.customConfig.uploadImgShowBase64 = true

		// 上传图片到服务器
		editor.customConfig.uploadFileName = 'file'; //设置文件上传的参数名称
		editor.customConfig.uploadImgServer = 'https://www.xiaozheng8.com/upload/editor'; //设置上传文件的服务器路径
		// editor.customConfig.uploadImgMaxSize = 10 * 1024 * 1024; // 将图片大小限制为 3M
		//自定义上传图片事件
		editor.customConfig.uploadImgHooks = {
			before: function (xhr, editor, files) {
				console.log(xhr);
				console.log(xhr.response);
				console.log(editor);
				console.log(files);
			},
			success: function (xhr, editor, result) {
				console.log(xhr);
				console.log(editor);
				console.log("上传成功");
			},
			fail: function (xhr, editor, result) {
				console.log("上传失败,原因是" + result);
				// insertImg(result);

			},
			error: function (xhr, editor) {
				console.log("上传出错");
			},
			timeout: function (xhr, editor) {
				console.log("上传超时");
			},
			customInsert: function (insertImg, result, editor) {
				console.log(insertImg);
				console.log(editor);
				// 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
				// insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果

				// 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
				var url = result.data
				insertImg(url)


				// result 必须是一个 JSON 格式字符串！！！否则报错
			}

		}

		editor.create();
		$('#div1').attr('style','height:auto;width:100%;object-fit: contain');
		console.log(window.location.href)
		window.onload = function () {

				window.addEventListener('message', function (e) {
					console.log(e)
					if (e.data.hasOwnProperty('token')) {
						setToken(e.data.token)	
					}

				})
			}

				function regulars() {
					// 获取URL中?之后的字符
					var str = location.search;
					str = str.substring(1, str.length);
					// 以&分隔字符串，获得类似Source=1这样的元素数组
					// var arr = str.split(" & ");
					var obj = new Object();
					// 将每一个数组元素以=分隔并赋给obj对象
					// for (var i = 0; i < arr.length; i++) {
					var tmp_arr = str.split(" = ");
					// console.log(tmp_arr);

					// var json=JSON.parse(tmp_arr);
					// obj[decodeURIComponent(tmp_arr[0])] = decodeURIComponent(tmp_arr[1]);
					// }
					var url = unescape(tmp_arr)
					// console.log(url);
					editor.txt.html(url);
				};
				regulars();
				var update = function (canshujuti) {
					console.log(canshujuti);
					editor.txt.html(param);

				}
				// var param = window.paramFromParent;
				// console.log(param);

				// editor.txt.html('<p>用 JS 设置的内容</p>')
				// document.getElementById("div1").onclick=function(){
				document.getElementById('btn1').addEventListener('click', function () {
					var json = editor.txt.html()
					// console.log(title.value);
					// console.log(classify.value);
					// if(title.value==''){
					// 	titleTxt.innerHTML="请输入标题"
					// }else{
					// 	titleTxt.innerHTML=""
					// }
					//  if(classify.value==""){
					// 	classifyTxt.innerHTML="请填写分类"
					// }else{
					// 	classify.innerHTML=""	
					// } 
					if (json == "<p><br></p>") {
						editorInner.innerHTML = "请输入咨讯"
					} else {
						editorInner.innerHTML = ""
					}

					// 获取 JSON 格式的内容
					// var jsonStr = JSON.stringify(json)
					console.log(json)
					window.parent.richcontent.value = json;
					// console.log(jsonStr)
				})
	</script>
</body>

</html>